<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>历史记录 - ToolsAPI</title>
    <link rel="icon" type="image/x-icon" href="img/ik.ico">
    
    <!-- Bootstrap 5 CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="css/fontawesome.min.css" rel="stylesheet">
    <!-- 自定义样式 -->
    <link href="css/custom.css" rel="stylesheet">
    <!-- 小米风格样式 -->
    <link href="css/xiaomi-style.css" rel="stylesheet">
</head>
<body class="xiaomi-theme">
    <div id="header"></div>
    
    <!-- 主容器 -->
    <div class="xiaomi-admin-container">
        <div id="sidebar"></div>

        <!-- 主内容区域 -->
        <main class="xiaomi-main-content">
            <div class="row mb-4">
                <div class="col-12">
                    <div class="xiaomi-page-header">
                        <h2 class="page-title">
                            <i class="fas fa-history me-2"></i>
                            历史记录
                        </h2>
                        <p class="page-subtitle">查看所有数据转换操作的历史记录</p>
                    </div>
                </div>
            </div>

            <div class="row mb-4">
                <div class="col-12">
                    <div class="xiaomi-card">
                        <div class="card-header">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-filter me-2"></i>
                                    筛选条件
                                </h5>
                                <button class="btn btn-outline-primary btn-sm" id="clearFilters">
                                    <i class="fas fa-times me-1"></i>
                                    清除筛选
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-3 col-md-6 mb-3">
                                    <label class="form-label">转换类型</label>
                                    <select class="form-select" id="filterType">
                                        <option value="">全部类型</option>
                                        <option value="yinhai-to-ph1">银海品项 → PH1</option>
                                        <option value="clinic-log">门诊日志转换</option>
                                        <option value="ph3-remote">PH3异地数据转换</option>
                                        <option value="data-split">数据拆分</option>
                                    </select>
                                </div>
                                <div class="col-lg-3 col-md-6 mb-3">
                                    <label class="form-label">状态</label>
                                    <select class="form-select" id="filterStatus">
                                        <option value="">全部状态</option>
                                        <option value="success">成功</option>
                                        <option value="failed">失败</option>
                                        <option value="processing">处理中</option>
                                    </select>
                                </div>
                                <div class="col-lg-3 col-md-6 mb-3">
                                    <label class="form-label">开始日期</label>
                                    <input type="date" class="form-control" id="filterStartDate">
                                </div>
                                <div class="col-lg-3 col-md-6 mb-3">
                                    <label class="form-label">结束日期</label>
                                    <input type="date" class="form-control" id="filterEndDate">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="xiaomi-card">
                        <div class="card-header">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-list me-2"></i>
                                    转换记录
                                </h5>
                                <div class="d-flex gap-2">
                                    <button class="btn btn-outline-success btn-sm" id="exportHistory">
                                        <i class="fas fa-file-excel me-1"></i>
                                        导出记录
                                    </button>
                                    <button class="btn btn-outline-danger btn-sm" id="clearHistory">
                                        <i class="fas fa-trash me-1"></i>
                                        清空记录
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-hover mb-0">
                                    <thead class="table-light">
                                        <tr>
                                            <th>转换时间</th>
                                            <th>文件名</th>
                                            <th>转换类型</th>
                                            <th>状态</th>
                                            <th>记录数</th>
                                            <th>成功率</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="history-table-body">
                                        <tr>
                                            <td colspan="7" class="text-center text-muted py-4">
                                                <i class="fas fa-inbox fa-3x mb-3 d-block"></i>
                                                <h5>暂无历史记录</h5>
                                                <p>开始使用转换功能后，记录将在这里显示</p>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="card-footer">
                            <nav>
                                <ul class="pagination pagination-sm justify-content-center mb-0" id="pagination">
                                    <!-- 分页导航将通过JavaScript动态生成 -->
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Scripts -->
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/layout-loader.js"></script>
    <script src="js/history.js"></script>
</body>
</html>